<template>
    <div class="main fl">
      <van-nav-bar
        title="浙江消防干部"
        left-arrow
        @click-left="onClickLeft"
      >
      <template #right>
        <van-icon name="ellipsis" size="18"/>
      </template>
      </van-nav-bar>
      <div class="main-content">
        <van-search class="main-search" v-model="value" placeholder="请输入搜索关键词" />
        <img
          class="main-image"
          src="../assets/home/yl.png"
        />
        <div class="main-menu">
          <div class="main-spsq">
            <p class="main-spsq-text">审批申请</p>
            <ul class="main-spsq-boxs">
            <li class="main-spsq-title" @click="handsSpsq(item.src)"
              v-for="(item,index) in spsqData" :key="index">
              <img :src="item.img"
              class="main-spsq-img"
              />
            </li>
            </ul>
          </div>
           <div class="main-gryy">
            <p class="main-spsq-text">个人应用</p>
            <ul class="main-spsq-boxs">
              <li class="main-spsq-title" @click="handsSpsq(item.src)"
                v-for="(item,index) in gryyData" :key="index">
                <img :src="item.img"
                class="main-spsq-img"
                />
              </li>
            </ul>
          </div>
          <div class="main-ggfw">
            <p class="main-spsq-text">公共服务</p>
            <ul class="main-spsq-boxs">
            <li class="main-spsq-title" @click="handsSpsq(item.src)"
              v-for="(item,index) in ggfwData" :key="index">
              <img :src="item.img"
              class="main-spsq-img"
              />
            </li>
            </ul>
          </div>
        </div>
      </div>
      <van-tabbar v-model="active" @change="onChange" class="main-btn">
        <van-tabbar-item icon="setting-o"  to="/xxtz">
          <span>消息通知</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive1" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="star-o" to="/wdsc">我的收藏</van-tabbar-item>
        <van-tabbar-item>
          <span>工作台</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/xxtx">
          <span>消息提醒</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive4" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item icon="user-circle-o" to="/wdll">
          <span>我的</span>
          <template #icon="props">
            <img :src="props.active ? icon.active5 : icon.inactive5" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'HomeView',
    data(){
      return {
        value:"",
        active: 2,
        icon: {
          active: require("@/assets/home/gzt.png"),
          active5: require("@/assets/home/wd.png"),
          inactive1: require("@/assets/home/xxtz.png"),
          inactive4: require("@/assets/home/xxtx.png"),
          inactive5: require("@/assets/home/wd.png"),
          inactive: '',
        },
        spsqData:[
          {
            src:'qjsq',
            img: require("@/assets/home/qjsq.png"),
          },
          {
            // src:'grzdsxbg',
            img: require("@/assets/home/grzdsxbg.png"),
          },
          {
            // src:'lysq',
            img: require("@/assets/home/lysq.png"),
          },
          {
            src:'zzjysq',
            img: require("@/assets/home/zzjysq.png"),
          },
          {
            // src:'gzhg',
            img: require("@/assets/home/gzhg.png"),
          },
          {
            // src:'ddsq',
            img: require("@/assets/home/ddsq.png"),
          },
          {
            // src:'zzsbsq',
            img: require("@/assets/home/zzsbsq.png"),
          },
          {
            src:'zjjsspsq',
            img: require("@/assets/home/zjjspssq.png"),
          },
           {
            // src:'ywpxsq',
            img: require("@/assets/home/ywpxsq.png"),
          },
          {
            src:'jhsq',
            img: require("@/assets/home/jhsq.png"),
          },
          {
            // src:'ldfjbzsq',
            img: require("@/assets/home/ldfjbzsq.png"),
          },
          {
            // src:'gbtx',
            img: require("@/assets/home/gbtx.png"),
          },
          {
            // src:'txshsq',
            img: require("@/assets/home/txshsq.png"),
          },
        ],
        gryyData:[
          {
            src:'sqjlck',
            img: require("@/assets/home/sqjlck.png"),
          },
          {
            // src:'jqck',
            img: require("@/assets/home/jqck.png"),
          },
          {
            src:'wyxx',
            img: require("@/assets/home/pxxx.png"),
          },
          {
            src:'wdzz',
            img: require("@/assets/home/gezz.png"),
          },
          {
            src:'wycx',
            img: require("@/assets/home/wdcx.png"),
          },
        ],
        ggfwData:[
          {
            src:'wyxz',
            img: require("@/assets/home/zlxz.png"),
          },
          {
            src:'zcdy',
            img: require("@/assets/home/zcdy.png"),
          },
          {
            src:'ywwh',
            img: require("@/assets/home/yywh.png"),
          },
        ],
      }
    },
    created(){},
    methods:{
      // 头部导航返回事件
      onClickLeft(){
        console.log('onClickLeft')
      },
      // 底部tab点击事件
      onChange(){
  
      },
      //点击跳转
      handsSpsq(src){
        if(src){
           this.$router.push({
              path: `/${src}`
          })
        }
      },
    }
  }
  </script>
  
  <style lang="less">
  .main{
    .main-content{
      background-color: #f2f2f6;
      .main-search{
        background-color: #ffffff;
      }
      .main-image{
        width: 100%;
        height: 120px;
      }
      .main-menu{
        .main-spsq,
        .main-gryy,
        .main-ggfw{
          margin: 10px 0;
          padding-bottom: 20px;
          background-color: #ffffff;
          .main-spsq-text{
            padding: 10px;
            font-size: 16px;
            font-weight: 600;
          }
          .main-spsq-boxs{
            position: relative;
            display: flex;
            justify-content: start;
            align-items: flex-start;
            flex-wrap: wrap;
            .main-spsq-title{
              width: 20%;
              display: flex;
              justify-content: center;
              align-items: flex-start;
              position: relative;
              height: 90px;
            }
            .main-spsq-img{
              width: 48px;
              margin: 0 auto;
              position: relative;
              display: block;
            }
          }
  
        }
      }
    }
    .main-btn{
      position: relative;
      min-height: 50px;
    }
  }
  </style>
  